<template>
  <div>
  <div class="select-num" v-for="(item,index) in items" :key="index">
    <input-plane :icon="icon" :label="label" :color="color">
      <div class="main">
        <div class="select" @click="select(index)">
          <span class="val">{{item.text}}</span>
          <span class="iconfont icondown"></span>
        </div>
        <div class="inp">
          <input @blur.prevent="autoScroll" @input="chaneNum($event, index)" :value="item.number"  class="num" type="number" pattern="[0-9]*">
        </div>
        <div class="icon" >
          <span @click="add" v-if="index===items.length-1" class="iconfont iconjia"></span>
          <span @click="del(index)" v-else class="iconfont iconlaji"></span>
        </div>
      </div>
    </input-plane>
  </div>
  </div>
</template>

<script>
import inputPlane from '../../components/base/input-plane'

export default {
  data () {
    return {
    }
  },
  props: {
    label: String,
    icon: String,
    color: String,
    options: Array,
    alias: Object,
    items: Array
  },
  components: {
    inputPlane
  },
  methods: {
    autoScroll () { // 解决输入法弹起后 无法自动收回
      const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
      window.scrollTo(0, Math.max(scrollHeight - 1, 0))
    },
    add () {
      this.items.push({})
    },
    del (index) {
      this.items.splice(index, 1)
    },
    chaneNum (e, index) {
      this.$set(this.items[index], 'number', e.target.value)
    },
    change (selectedVal, selectedIndex, selectedText, index) {
      this.$set(this.items[index], 'text', selectedText.join())
      this.$set(this.items[index], 'value', selectedVal.join())
      this.$set(this.items[index], 'index', selectedIndex.join())
    },
    select (index) {
      if (this.type === 'date') {

      } else {
        this.$createPicker({
          title: '选择',
          data: [this.options],
          alias: this.alias,
          onSelect: (selectedVal, selectedIndex, selectedText) => this.change(selectedVal, selectedIndex, selectedText, index)
        }).show()
      }
    }
  }
}
</script>

<style scoped lang="stylus">
  .select-num
    margin-top 15px
    .main
      display flex
      justify-content space-around
      position absolute
      top  0
      left 0
      right 0
      bottom 0
      padding 8px 10px
      .select
        width:131px;
        border:1px solid rgba(230,229,230,1);
        display flex
        align-items center
        justify-content space-between
        .val
          padding-left 10px
          dpr-font(16px)
          color #55545d
        .iconfont
          margin-right 12px
          dpr-font(16px)
          color #989898
      .inp
          margin-left 10px
          flex 1
          display flex
          align-items center
          border:1px solid rgba(230,229,230,1);
          .num
            text-align center
            border none
            color #55545d
            dpr-font(16px)
            width:72px;
            border none
            outline none
      .icon
        width 40px
        flex 0 0 40px
        justify-content center
        display flex
        align-items center
        dpr-font(16px)
        color #009C4E
</style>
